@import 'tailwindcss';
@import 'katex/dist/katex.min.css';
@import './partials/animations.css';
@import './partials/blocks.css';
@import './partials/code.css';
@import './partials/code-block.css';
@import './partials/collab.css';
@import './partials/lists.css';
@import './partials/placeholder.css';
@import './partials/syntax-highlight.css';
@import './partials/table.css';
@import './partials/typography.css';
@import './partials/math.css';
@import './partials/draggable.css';
@import './partials/frappe-gantt.css';
@import './partials/youtube.css';
@import './partials/mention.css';

@custom-variant dark (&:is(.dark *));
.bg-\[--color-bg\] {
  background-color: var(--color-bg);
}
@layer utilities {
  .ProseMirror {
    @apply caret-black outline-0 pr-8 pl-20 py-16 z-0 lg:pl-8 lg:pr-8 mx-auto max-w-3xl;
    overflow-x: hidden;
  }

  /* 新增：编辑器容器专用样式 */
  .prose-container {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  
  .prose-container .ProseMirror {
    @apply caret-black outline-0 px-8 py-12 z-0 mx-auto max-w-4xl;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .dark .prose-container .ProseMirror {
    @apply caret-white;
  }

  /* ContentItemMenu 主题样式 */
  .tippy-box[data-theme~='content-item-menu'] {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg rounded-lg;
    z-index: 9999 !important;
  }

  .tippy-box[data-theme~='content-item-menu'] .tippy-content {
    padding: 0 !important;
  }

  .dark .ProseMirror {
    @apply caret-neutral-400;
  }

  .ProseMirror .selection {
    @apply inline;
  }

  .ProseMirror *::selection,
  .ProseMirror ::selection,
  .ProseMirror .selection {
    background-color: rgba(0, 100, 255, 0.2) !important;
    color: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    text-decoration: inherit !important;
    display: inline !important;
  }

  .ProseMirror-hideselection *::selection {
    background: transparent !important;
  }

  .dark .ProseMirror *::selection,
  .dark .ProseMirror ::selection,
  .dark .ProseMirror .selection {
    background-color: rgba(100, 150, 255, 0.3) !important;
  }

  .ProseMirror.is-all-selected *::selection {
    background-color: rgba(0, 100, 255, 0.2) !important;
    color: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    text-decoration: inherit !important;
  }

  .dark .ProseMirror.is-all-selected *::selection {
    background-color: rgba(100, 150, 255, 0.3) !important;
  }

  .ProseMirror strong::selection,
  .ProseMirror strong *::selection,
  .ProseMirror b::selection,
  .ProseMirror b *::selection {
    font-weight: bold !important;
  }

  .ProseMirror em::selection,
  .ProseMirror em *::selection,
  .ProseMirror i::selection,
  .ProseMirror i *::selection {
    font-style: italic !important;
  }

  .ProseMirror u::selection,
  .ProseMirror u *::selection {
    text-decoration: underline !important;
  }

  .ProseMirror s::selection,
  .ProseMirror s *::selection,
  .ProseMirror strike::selection,
  .ProseMirror strike *::selection {
    text-decoration: line-through !important;
  }

  .ProseMirror > .react-renderer {
    @apply my-12;
  }

  .ProseMirror > .react-renderer:first-child {
    @apply mt-0;
  }

  .ProseMirror > .react-renderer:last-child {
    @apply mb-0;
  }

  .ProseMirror.resize-cursor {
    @apply cursor-col-resize;
  }

  .ProseMirror .ProseMirror-gapcursor {
    @apply relative w-full max-w-5xl mx-auto;
  }

  .ProseMirror .ProseMirror-gapcursor::after {
    content: '';
    display: block;
    border-top: 1px solid rgb(0 0 0 / 0.4);
    width: 100%;
    max-width: 80rem; /* match max-w-5xl */
    position: relative;
    top: -1.5em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .dark .ProseMirror .ProseMirror-gapcursor::after {
    border-top-color: rgb(255 255 255 / 0.4);
  }

  /* Add custom cursor styles to make it more visible */
  .ProseMirror.ProseMirror-focused {
    @apply caret-black;
  }

  .dark .ProseMirror.ProseMirror-focused {
    @apply caret-black;
  }

  /* 评论标记样式 - Notion 风格（下划线） */
  .comment {
    text-decoration: underline;
    text-decoration-color: rgba(251, 191, 36, 0.6);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
  }

  /* 深色模式 */
  .dark .comment {
    text-decoration-color: rgba(251, 191, 36, 0.5);
  }

  /* 嵌套评论 - 更深的颜色 */
  .comment .comment {
    text-decoration-color: rgba(251, 191, 36, 0.8);
    text-decoration-thickness: 2.5px;
  }

  /* 三层嵌套 */
  .comment .comment .comment {
    text-decoration-color: rgba(251, 191, 36, 1);
    text-decoration-thickness: 3px;
  }

  /* 激活状态 - 蓝色下划线 + 淡蓝色背景 */
  .comment.comment-active {
    text-decoration-color: rgba(59, 130, 246, 0.8);
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 2px;
  }

  .dark .comment.comment-active {
    text-decoration-color: rgba(96, 165, 250, 0.8);
    background-color: rgba(59, 130, 246, 0.15);
  }

  /* 悬停状态 - 背景高亮 */
  .comment:hover:not(.comment-active) {
    background-color: rgba(251, 191, 36, 0.1);
    border-radius: 2px;
    text-decoration-color: rgba(251, 191, 36, 1);
  }

  .dark .comment:hover:not(.comment-active) {
    background-color: rgba(251, 191, 36, 0.08);
  }

  /* 悬停状态（从面板悬停） */
  .comment.comment-hovered {
    background-color: rgba(251, 191, 36, 0.15);
    border-radius: 2px;
    text-decoration-color: rgba(251, 191, 36, 1);
  }

  .dark .comment.comment-hovered {
    background-color: rgba(251, 191, 36, 0.12);
  }

  [data-theme='slash-command'] {
    width: 1000vw;
  }

  /* TextMenu specific styles for better positioning and z-index management */
  [data-tippy-root] {
    z-index: 10000 !important;
  }

  .tippy-box[data-plugin='textMenu'] {
    z-index: 10000 !important;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.05));
  }

  .tippy-box[data-plugin='textMenu'] .tippy-content {
    padding: 0 !important;
    overflow: visible;
  }

  /* 更新为text-menu主题的样式 */
  .tippy-box[data-theme~='text-menu'] {
    z-index: 10000 !important;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .tippy-box[data-theme~='text-menu'] .tippy-content {
    padding: 0 !important;
    overflow: visible;
  }

  /* Ensure Radix Popover contents have correct z-index */
  [data-radix-popper-content-wrapper] {
    z-index: 99999 !important;
  }

  [data-radix-portal] {
    z-index: 99999 !important;
  }

  /* 确保拼写检查面板本身有最高优先级 */
  [data-spell-check-panel] {
    z-index: 100001 !important;
    position: relative !important;
  }

  /* Smooth transitions for menu appearance */
  .tippy-box[data-animation='shift-away-subtle'][data-state='hidden'] {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  .tippy-box[data-animation='shift-away-subtle'][data-state='visible'] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Text menu specific animations */
  .tippy-box[data-theme~='text-menu'][data-animation='shift-away-subtle'][data-state='hidden'] {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition:
      opacity 120ms ease-out,
      transform 120ms ease-out;
  }

  .tippy-box[data-theme~='text-menu'][data-animation='shift-away-subtle'][data-state='visible'] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
      opacity 180ms ease-out,
      transform 180ms ease-out;
  }

  /* 优化菜单稳定性 */
  .tippy-box[data-theme~='text-menu'] {
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  .tippy-box[data-theme~='text-menu'] .tippy-content {
    will-change: auto;
  }

  /* Ensure menu is always in front */
  .text-menu-container {
    z-index: 10001 !important;
  }


  /* Responsive adjustments for mobile */
  @media (max-width: 640px) {
    .tippy-box[data-plugin='textMenu'],
    .tippy-box[data-theme~='text-menu'] {
      max-width: calc(100vw - 16px) !important;
      left: 8px !important;
      right: 8px !important;
    }

    .tippy-box[data-plugin='textMenu'] .tippy-content,
    .tippy-box[data-theme~='text-menu'] .tippy-content {
      max-width: none !important;
      width: 100% !important;
    }
  }

  /* High contrast theme support */
  @media (prefers-contrast: high) {
    .tippy-box[data-theme~='text-menu'] {
      border: 2px solid currentColor !important;
      box-shadow: none !important;
    }
  }

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    .tippy-box[data-theme~='text-menu'] {
      transition: none !important;
    }

    .tippy-box[data-theme~='text-menu'][data-animation='shift-away-subtle'] {
      transition: none !important;
    }
  }
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    overflow-x: hidden;
  }
  html {
    overflow-x: hidden;
  }
}

/* Tiptap 协作光标的全局样式覆盖 */
.collaboration-carets__label {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  position: absolute !important;
  top: -2em !important;
  font-style: normal !important;
  font-weight: 600 !important;
  left: 0px !important;
  white-space: nowrap !important;
  z-index: 999999 !important;
  isolation: isolate !important;
}

.collaboration-carets__caret {
  border-width: 1px !important;
  position: relative !important;
  z-index: 999999 !important;
  isolation: isolate !important;
}

/* 确保菜单层级低于协作光标 */
.tippy-box {
  z-index: 9999 !important;
}

[data-tippy-root] {
  z-index: 9999 !important;
}

[data-radix-popper-content-wrapper] {
  z-index: 9999 !important;
}

[data-radix-portal] {
  z-index: 9999 !important;
}

/* 表格环境中的协作光标强制显示 */
.ProseMirror table .collaboration-cursor__caret,
.ProseMirror table .collaboration-carets__caret,
.ProseMirror .tableWrapper .collaboration-cursor__caret,
.ProseMirror .tableWrapper .collaboration-carets__caret {
  z-index: 999999 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

.ProseMirror table .collaboration-cursor__label,
.ProseMirror table .collaboration-carets__label,
.ProseMirror .tableWrapper .collaboration-cursor__label,
.ProseMirror .tableWrapper .collaboration-carets__label {
  z-index: 999999 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

/* 确保表格控制元素层级远低于协作光标 */
.ProseMirror table .grip-column,
.ProseMirror table .grip-row,
.ProseMirror table .column-resize-handle {
  z-index: 1 !important;
}

/* 表格容器不能创建新的层叠上下文 */
.ProseMirror .tableWrapper {
  overflow-y: visible !important;
  z-index: 1 !important;
}

/* 表格图片样式优化 */
.ProseMirror td img[data-table-image='true'],
.ProseMirror th img[data-table-image='true'] {
  display: block !important;
  margin: 4px auto !important;
  max-width: 120px !important;
  max-height: 80px !important;
}

@media (max-width: 640px) {
  .ProseMirror td img[data-table-image='true'],
  .ProseMirror th img[data-table-image='true'] {
    max-width: 80px !important;
    max-height: 60px !important;
  }
}
